<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人成绩录入</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
	function bjChange(value) {
		$.post('grade',{method:'getStu',bjId:value},function(data){
			$('#stu').html(data);
		},'html');
	}
	function cx() {
		var stuId=$('#stu').val();
		$('#table').load('grade',{method:'getPersonGrade',stuId:stuId});
		
	}
	function cjChange(id,value) {
		$.post('grade',{method:'cjChange',id:id,grade:value},function(data){});
	}
	$(function(){
		refreshTable();
		$( "#bj" ).selectmenu();
		
	})	
	function fandeng() {
			window.location="login.jsp"
		}	
		function fanzhu() {
			window.location="main?method=main"
		}	
	
</script>
<style type="text/css">
.btn{width: 115px;height: 45px;line-height: 15px;text-align: center;color: #fff;font-size: 15px;text-transform: uppercase;text-decoration: none;font-family: sans-serif;box-sizing: border-box;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 60px;z-index: 1}.btn:hover{animation: animate 8s linear infinite}@keyframes animate{0%{background-position: 0%}100%{background-position: 400%}} 
    .btn::before{content: '';position: absolute;top: -5px;left: -5px;right: -5px;bottom: -5px;z-index: -1;background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);background-size: 400%;border-radius: 40px;opacity: 0;transition: 0.5s}.btn:hover::before{filter: blur(20px);opacity: 1;animation: animate 8s linear infinite}    
 </style>
<style type="text/css">
		.button1 {
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
 padding: 16px 32px;
 text-align: center;
 background-color: white;
 color: black;
background: #ee0979; 
background: linear-gradient(to right, #ee0979, #ff6a00);
 border-radius:5px;
 }
 .button1:hover {
 background-color: #4CAF50;
 color: white;
 }
</style>
<style type="text/css">
	tble,th{
		border: 1px solid;
	}
	table{
		border-collapse: collapse;
		margin: auto;
	}
	td{
		width: 150px;
		height: 80px;
		text-align: center;
	}
	body {	
	 height: 700px;
 	 background-image: linear-gradient(49deg, #FFC0CB , #FFE4E1 60%); 
}
	
.bbb{
		margin:auto;
		width: 300px;
		height: 200px;
		padding: 20px;
	}

</style>
</head>
<body>
<div class="aaa">
	<p>
		<label>班级：</label> 
		<select id="bj" onchange="bjChange(this.value)">
			<option value="0">--请选择--</option>
			<c:forEach items="${list}" var="bj">
				<option value="${bj.id}">${bj.name}</option>

			</c:forEach>
		</select> 
		<label>学生：</label> 
		<select id="stu">
			<option value="0">--请选择--</option>
			<c:forEach items="${stus}" var="stu">
				<option value="${stu.id}">${stu.name}</option>
			</c:forEach>
		</select>
		<button onclick="cx()" class="button1">查询</button>
	</p>
	</div>
	<div id="table">
	
	</div>
	<div class="bbb">
	<button onclick="fandeng()" class="btn">返回登录页面</button>
	<button onclick="fanzhu()" class="btn">返回主页面</button>
	</div>
</body>
</html>